import React, { Component } from 'react'
import './index.less'
import { Calendar } from 'antd'
import {Icon, SegmentedControl,} from 'antd-mobile'
import 'antd/dist/antd.css';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default class index extends Component {
  state = {
    showAll: false,
    activeIndex:0,
  }

  onSelect = (value) => {
    console.log(moment(value).format("YYYY-MM-DD"),"qqqqqqqqqqqqqqqqqq");
  }
  onChange=(e)=>{
    this.setState({activeIndex:e.nativeEvent.selectedSegmentIndex})
  }
  render() {
    const { showAll,activeIndex} = this.state
    return (
      <div className="hdbmindex">
        <div className="header-title">
          <img src={require('../../img/培训活动-海报.png')} alt="" />
        </div>
        <div className="container">
          <div className="containerContent">
            <div className="calendar">
              <div className="calendar-on">
                <span>活动日历</span>
                <span className="right" onClick={() => this.setState({
                  showAll: !this.state.showAll
                })}><Icon type={showAll ? 'up' : 'down'} /></span>
              </div>
              <div className="calendar-down"  style={{height:showAll ? 'auto' : '150px'}}>
                <Calendar
                  fullscreen={false}
                  onSelect={this.onSelect}
                />
              </div>
            </div>
          </div>
        </div>
        <div className="Control">
          <div className="activity"> 
            <SegmentedControl
            onChange={this.onChange}
            values={['活动列表', '我参与的']} />
            <span style={{marginLeft:activeIndex===0?'25%':'75%'}}></span>
          </div>
          <div style={{display:activeIndex===0?'block':'none'}}>活动列表</div>
          <div style={{display:activeIndex===1?'block':'none'}}>我参与的</div>
        </div>
      </div>
    )
  }
}
